import { BaseComponent, triggerManager, BaseComponentProps, emojiPlayerModel } from 'orionos-eve-core';
import { observer } from 'mobx-react';
import React from 'react'
import { Text, View, Image, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { WebView } from 'react-native-webview'
import { TaskTrigger } from './TaskTrigger';
import { TaskViewModel } from './TaskViewModel';
import { TaskVoice } from './TaskVoice';

triggerManager.addTrigger(new TaskTrigger());

// let token = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IkY2QzIzQzVFRTc1M0ZGRjNFMjg4NTE4ODY4NzgwRDQwN0ZBNUIzQ0RSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjlzSThYdWRUX19QaWlGR0lhSGdOUUgtbHM4MCJ9.eyJuYmYiOjE3NDczNjU2NDMsImV4cCI6MTc0NzM2OTI0MywiaXNzIjoiaHR0cDovLzE5Mi4xNjguMC4zOjkwMTAiLCJjbGllbnRfaWQiOiJSZWFkZXJDbGllbnQiLCJzdWIiOiJ7XCJPcmdhbml6YXRpb25JZFwiOjEsXCJSb2xlXCI6XCJSZWFkZXJcIixcIklkXCI6OTU5NDZ9IiwiYXV0aF90aW1lIjoxNzQ3MzY1NjQzLCJpZHAiOiJsb2NhbCIsInJvbGUiOiJSZWFkZXIiLCJuYW1lIjoi6aKcIiwiZ2VuZGVyIjoi55S3Iiwib3JnYW5pemF0aW9uaWQiOiIxIiwicmVhZGVyY29kZSI6IkpNUzAwMTc1NyIsImp0aSI6IjM0OEUzNEVCMjdEQTJEOEU5Qjg3MDAwMEM1NTZGMTA4IiwiaWF0IjoxNzQ3MzY1NjQzLCJzY29wZSI6WyJvcGVuaWQiLCJwcm9maWxlIiwicmVhZGVyLnNjb3BlIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbInB3ZCJdfQ.SBjaOEcqbtHY5RQnyGeZY2frtyhf1t9Zp-hPKiBSGKG4y4o88o_ipbuUHuSB0V7KAxnrUs8MYB9ejX1CMiNvp86GTUaoWuGA4gk7Yimy68kbyJC87aLP38z8OCrsUS0n8uWg5HnUAin2aX2SlvTwjtttbluemvMsWpWsh1Mkxupj2mn9TdxtEKwvKDg71vbFB4n-WJkl3OUlEjoPYn0GnpFM0tQHBMa74wSNw0Ck7g3wZO2NkDrPFm0EzWbfsTcpFw99lPvurC4f3ueY94DCmqj8T6lXLjOY-CRf_M68w-ZVQUQZFsnVzj9Y1-qyz_FxmZ4FaFToUkFrldWzs_m0IA'
// let departmentid = '14601'
// let keyid = '95946'
// let organizationid = '1'
//评测不鉴权,配置默认值
let scriptTxt = 'localStorage.setItem("orgid", 1);localStorage.setItem("depid", 1);localStorage.setItem("keyid", 1);'

const styles = StyleSheet.create({
    pageWrap: {
        width: '100%',
        height: '100%',
    },
    navBar: {
        position: 'relative',
        width: '100%',
        height: '10%',
        backgroundColor: 'blue',
    },
    goback: {
        position: 'absolute',
        top: 6,
        left: 10,
        color: 'white',
    },
    gobackImg: {
        width: 20,
        height: 20,
    },
    quit: {
        position: 'absolute',
        top: 6,
        right: 10,
    },
    quitTxt: {
        color: 'white',
    }
})

@observer
export class TaskScreen extends BaseComponent<BaseComponentProps, TaskViewModel, TaskVoice>{
    private webview: any
    public viewModel: TaskViewModel
    public bookid: any = 'initId'
    public constructor(props: BaseComponentProps){
        super(props)
        this.webview = React.createRef()
        this.viewModel = new TaskViewModel();
        let voice = new TaskVoice(this.viewModel);
        this.setViewModel(this.viewModel);
        this.setVoice(voice);
    }
    public componentDidMount() {
        //重写界面的didMount，必须调用super
        super.componentDidMount();
    }

    public componentWillMount() {

    }

    public componentWillUnmount() {
        //重写界面的Unmount，必须调用super
        super.componentWillUnmount();
    }
    private goback(){
        console.log('后退')
        this.webview.current.goBack()
    }
    private quit(){
        this.viewModel.toHome()
    }
    public render(){
        
        return (
            <View style={styles.pageWrap}>
                <View style={styles.navBar}>
                    <View style={styles.goback}>
                        <TouchableWithoutFeedback onPress={()=>{this.goback()}}>
                            <Image style={styles.gobackImg} source={require('../../img/goback.png')}></Image>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={styles.quit}>
                        <TouchableWithoutFeedback onPress={()=>{this.quit()}}>
                            <Text style={styles.quitTxt}>退出</Text>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
                <WebView
                    ref={this.webview}
                    // source={{uri: `https://zhiyue.insyte.cn/h5/exam/#/pages/book/index?token=${token}&departmentid=${departmentid}&organizationid=${organizationid}&keyid=${keyid}`}}
                    //bookid要传，其他参数任意传有校验但是不鉴权
                    source={{uri: 'https://zhiyue.insyte.cn/h5/exam/#/pages/book/bookDetail?bookid=346&token=1&departmentid=14601&organizationid=1'}}
                    // source={{uri: 'https://zhiyue.insyte.cn/h5/exam/#/pages/book/bookDetail?bookid=346'}}
                    style={{width: '100%', height: '90%'}}
                    injectedJavaScript={scriptTxt}
                    onLoadProgress={e=>console.log(e.nativeEvent.progress)}></WebView>
            </View>
        )
    }
}

